/* Buttons */

%button {
  @include button(normal);
  &:focus { @include button(focus); }
  &:hover { @include button(hover); }
  &:active { @include button(active); }
  &:insensitive { @include button(insensitive); }
}

%flat_button {
  @include button(flat-normal);
  &:focus { @include button(flat-focus); }
  &:hover { @include button(flat-hover); }
  &:active { @include button(flat-active); }
  &:insensitive { @include button(flat-insensitive); }
}

%default_button {
  @include button(normal, $bc:$primary, $tc:on($primary),);
  &:focus { @include button(focus, $bc:$primary, $tc:on($primary)); }
  &:hover { @include button(hover, $bc:$primary, $tc:on($primary)); }
  &:insensitive { @include button(insensitive, $bc:$primary, $tc:on($primary)); }
  &:active { @include button(active, $bc:$primary, $tc:on($primary),); }
}

// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
  @include button(flat-normal, $tc:on($osd));
  &:insensitive { @include button(insensitive, $tc:on($osd), $bc:$osd); }
  &:focus { @include button(focus, $tc:on($osd), $bc:$osd);}
  &:hover { @include button(hover, $tc:on($osd), $bc:$osd);}
  &:active { @include button(active, $tc:on($osd), $bc:$osd);}
  &:outlined, &:checked { @include button(checked, $tc:on($osd), $bc:$osd);}
}

.button {
  min-height: 20px;
  padding: $base_padding $base_padding * 2;
  border-radius: $base_radius;
  border: none;
  @extend %button;

  @if $colorful == 'true' {
    &:active {
      background-color: $primary;
      color: on($primary);
    }
  }

  .popup-menu & {
    @extend %flat_button;

    @if $colorful == 'true' {
      &:active {
        background-color: $primary;
        color: on($primary);
      }
    }
  }

  // default style
  &.default {
    @extend %default_button;
  }

  // flat style
  &.flat {
    @extend %flat_button;
  }
}

.icon-button {
  @extend %button; // same style as buttons
  border-radius: $circular_radius;
  padding: $base_padding;
  background-color: $fill;
  min-height: $scalable_icon_size;

  @if $colorful == 'true' {
    &:active {
      background-color: $primary;
      color: on($primary);
    }
  }

  StIcon {
    icon-size: $scalable_icon_size;
    -st-icon-style: symbolic;
  }

  // default style
  &.default {
    @extend %default_button;
  }

  // flat style
  &.flat {
    @extend %flat_button;
  }
}
